<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="640px" title="选择客户" center class="dialog-concat"
               :close-on-click-modal="false" :close-on-press-escape='false'>
      <el-form ref="form" label-width="72px" :model="form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户分组:" prop="typeIdWeb">
              <el-cascader size="small" style="width: 217px"
                           v-model="form.typeIdWeb"
                           class="input"
                           props.checkStrictly=true
                           change-on-select
                           :options="treeOptions"
                           :props="{ expandTrigger: 'hover',label: 'text', value: 'id', children: 'children'}"
                           @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称:" prop="query">
              <el-input v-model="form.query" size="small" placeholder="客户名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 15px" class="dialog-footer">
          <el-col :span="24" align="center">
            <el-button size="mini" @click="reset">重 置</el-button>
            <el-button type="primary" size="mini" @click="search" :loading="loading">{{loading?'搜索中':'搜 索'}}</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="搜索结果:">
              <div class="box">
                <el-radio-group v-model="checkPeople">
                  <el-radio v-for="item,index in searchList" :title="item.linker" :key="index" :label="item">
                    {{item.linker}}
                  </el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已选择:">
              <div class="box">
                <el-radio v-show="checkPeople!=''" v-model="checkPeople.id" :label="checkPeople.id">
                  {{checkPeople.linker}}
                </el-radio>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部按钮-->
      <div class="dialog-footer" align="center">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <!--创建联系人-->
    <el-dialog :visible.sync="dialogCustomer" width="600px" title="添加到已有客户" center :before-close="cancel">
      <el-form label-width="80px" class="customer" :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="姓名:" prop="linker">
          <el-input v-model="ruleForm.linker" size="small"></el-input>
        </el-form-item>
        <el-form-item label="邮 箱:" prop="email">
          <el-input v-model="ruleForm.email" size="small"></el-input>
        </el-form-item>
        <el-form-item label="职 位:" prop="postType">
          <el-input v-model="ruleForm.postType" size="small"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="telFax">
          <el-input v-model="ruleForm.telFax" size="small"></el-input>
        </el-form-item>
        <el-form-item label="社交平台:" prop="socialType">
          <el-select v-model="ruleForm.socialType" size="small">
            <el-option
              v-for="item in common.socialOptions"
              :key="item.id"
              :label="item.dictKey"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="socialAccount">
          <el-input v-model="ruleForm.socialAccount" size="small" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="备注:" style="width: 94%;" prop="remarks">
          <el-input type="textarea" :rows="2" v-model="ruleForm.remarks" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" align="right">
        <el-button @click="cancel" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="save" :loading="isSave">{{isSave?'正在保存':'保 存'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {queryCustType} from '@/api/customer'
    import {getContact, addHasMan} from '@/api/mail/make'
    import {mapState} from 'vuex'

    export default {
        name: "DialogAddCustomer",
        props: ['senderEmail'],
        data() {
            return {
                dialogCustomer: false,
                dialogVisible: false,
                form: {
                    query: '',//关键字
                    typeId: '',//客户分组ID
                    typeIdWeb: [],//分组选择
                },
                size: 'medium',
                searchList: [],
                checkPeople: '',//搜索结果
                treeOptions: [],//客户分组
                loading: false,
                ruleForm: {
                    linker: "",
                    email: "",
                    postType: "",
                    telFax: "",
                    socialType: "",
                    socialAccount: "",
                    remarks: ""
                },
                rules: {
                    linker: [
                        {required: true, message: '请输入客户姓名', trigger: 'blur'},
                    ],
                    email: [
                        {required: true, message: '请输入正确的客户邮箱', trigger: 'blur'}
                    ],
                },
                isSave: false
            }
        },
        computed: {
            ...mapState(['common']),
        },
        methods: {
            reset() {
                this.form.typeId = '';
                this.$refs['form'].resetFields()
            },
            cancel(){
                console.log('执行')
                this.dialogCustomer = false;
                this.$refs['ruleForm'].resetFields();
            },
            //选择完成客户
            submit() {
                //提交结果
                if(this.checkPeople){
                    this.dialogVisible = false;
                    this.dialogCustomer = true;
                    this.$refs['form'].resetFields()
                }else{
                    this.$message({
                        message: '请先选择指定联系人',
                        type: "success"
                    });
                    return;
                }
            },
            //保存至已有客户
            save() {
                if (this.ruleForm.linker == '' || this.ruleForm.email == '') {
                    this.$message({
                        message: '请填写完整的联系人姓名或邮箱',
                        type: "success"
                    });
                    return;
                }else{
                    const param = {
                        id: this.checkPeople.custid,
                        custLinkDtos: [this.ruleForm]
                    }
                    this.isSave = true;
                    addHasMan(param).then(res => {
                        this.isSave = false;
                        this.dealEnd(res);
                    }).catch(() => {this.isSave = false; this.$refs['ruleForm'].resetFields()})
                }
            },
            //搜索
            search() {
                this.loading = true;
                getContact(this.form).then(res => {
                    this.loading = false;
                    if (res.data.success) {
                        this.searchList = res.data.data;
                    }
                }).catch(err => {
                    this.loading = false;
                })
            },
            handleChange(file, fileList) {
                this.form.typeId = file[file.length - 1];
            },
            //客户分组
            getGroup(email) {
                console.log(email)
                this.ruleForm.email=email
                queryCustType().then(res => { // 当前用户的分组
                    if (res.data.success) {
                        this.treeOptions = res.data.data;
                        this.treeOptions.unshift({text: '全部客户', linker: '', id: ''})
                        this.dialogVisible = true;
                    }
                })
            },
            dealEnd(res) {
                if (res.data.success) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.$emit('relationCustomer')
                    this.dialogCustomer = false;
                    this.$refs['ruleForm'].resetFields()
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: "success"
                    });
                }

            },
        }
    }
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper.dialog-concat {
    .box {
      border-radius: 10px;
      padding: 0 10px;
      background-color: #f5f5f5;
      height: 200px;
      overflow-y: scroll;

      label.el-radio {
        display: block;
        line-height: 30px;
      }
    }

    .el-dialog__body {
      padding: 0 20px 0 20px !important;
    }

    .el-dialog__footer {
      padding: 0 20px 20px;
    }
  }

  .customer {
    form.el-form.customer {
      max-height: 435px;
      overflow-y: auto;
    }

    .el-select,
    .el-input {
      width: 93%;
    }

    .icon-delete_icon.remove {
      position: absolute;
      right: 5px;
    }

    .addPeople {
      font-size: 12px;
      border-bottom: 1px solid #232323;
      padding: 2.5px 0;
      color: #232323;
    }
  }

</style>
